<template>
    <!-- 头像 -->
    <div class="avatar">
        <header class="avatar-header">
            <p class="font-30">选择头像</p>
        </header>
        <main class="avatar-main">
            <figure class="main-figure" v-for="item in imgList" :key="item.id" @click="chooseAvatar(item)">
                <img class="figure-img" :src="item.imgUrl">
                <div class="figure-mask" v-show="item.id === avatarData.id">
                    <van-icon class="mask-icon" name="success" />
                </div>
            </figure>
        </main>
        <footer class="avatar-footer">
            <button class="footer-close" @click="close">取消</button>
            <button class="footer-confirm" @click="confirm">确认</button>
        </footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imgList:[
                {
                    id:0,
                    imgUrl:new URL('@/assets/image/home/avatar.png',import.meta.url).href,
                },
                {
                    id:1,
                    imgUrl:new URL('@/assets/image/home/avatar1.png',import.meta.url).href,
                },
            ],
            avatarData:{
                id:0,
                imgUrl:new URL('@/assets/image/home/avatar.png',import.meta.url).href,
            },
        }
    },
    methods: {
        chooseAvatar(data){
            this.avatarData = data;
        },
        close(){
            this.$emit('close',false);
        },
        confirm(){
            this.$emit('confirm',this.avatarData);
        }
    },
}
</script>

<style lang="scss" scoped>
.avatar{
    .avatar-header{
        color: #000;
        border-bottom: 1px solid #000;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .avatar-main{
        display: flex;
        gap: 20px;
        margin-bottom: 66px;
        ::v-deep .main-figure{
            position: relative;
            left: 0;
            top: 0;
            .figure-img{
                width: 128px;
                height: 128px;
                border-radius: 50%;
            }
            .figure-mask{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0,0,0,.7);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                .mask-icon{
                    font-size: 28px;
                    color: #fff;
                }
            }
        }
    }
    .avatar-footer{
        display: flex;
        justify-content: space-between;
        .footer-close,.footer-confirm{
            min-width: 320px;
            height: 70px;
            border-radius: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            font-size: 32px;
        }
        .footer-close{
            background-color: #fff;
            color: #000;
            border: 1px solid #ccc;
        }
        .footer-confirm{
            background-color: #000;
            color: #fff;
            border: 0;
        }
    }
}
</style>